import React from 'react';
import {Icon, message,Button} from 'antd';
import './style/';
import {WeaTools, WeaInput, WeaDialog, WeaLocaleProvider} from "ecCom";
import Setting_Tab from "./Setting_Tab";
import Content from './Content'
const getLabel = WeaLocaleProvider.getLabel;
class QuickSearch extends React.Component {
    constructor(props){
        super(props);
    }


    state = {
        searchdiv:"hidden",
        IconType:"down",
        searchName:"人员",
        type:1,
        searchContent:"",
        defaultcon:"设置默认搜索内容",
        radius:50,
        bgColor:"#000000",
        visible:false,
        isSys:"1",
        searchTypes:[],
        contentType:"",
        searchheight:"46",
        bgtmd:"33",
        itemcolor:"#fff",
        itembg:"#525050",
        itembgtmd:"33",
        concolor:"#d6dfe8",
        selectbg:"#5892c1",
        selectTmd:"33",
        searchUrl:"/spa/hrm/index_mobx.html#/main/hrm/addressbook?from=quickSearch&lastname="
    }

    changeSearchName = (item) =>{
        this.setState({searchName: item.name,searchdiv:"hidden",IconType: "down",type:item.type,searchUrl: item.url});
    }

    searchS = () => {
        window.open(this.state.searchUrl+this.state.searchContent);
    }

changeSearch = () =>{
        if(this.state.IconType=="down"){
            this.setState({IconType: "up",searchdiv: "visible"});
        }else {
            this.setState({IconType: "down",searchdiv: "hidden"});
        }
}

     changeXzTmd = (value) => {
        this.setState({selectTmd: value});
     }

    changeDefaultCon = (value) => {
         this.setState({defaultcon: value});
    }

    radiusChange = (value) => {
        this.setState({radius: value});
    }

    changebgColor = (value) => {
        this.setState({bgColor: value});
    }

    changebgTMD = (value) => {
        this.setState({bgtmd: value});
    }

    changeitembgTMD = (value) => {
        this.setState({itembgtmd: value});
    }

    changeItemColor = (value) => {
        this.setState({itemcolor: value});
    }

    changeItembg = (value) => {
        this.setState({itembg: value});
    }

    changeConColor = (value) => {
        this.setState({concolor: value});
    }

    changeselectedBg = (value) => {
        this.setState({selectbg: value});
    }

    changeSearchHeight = (value) => {
       this.setState({searchheight: value});
    }

    saveSetting= () =>{
            WeaTools.callApi('/api/portal/quicksearch/setquick','POST',{
                jsonStr: JSON.stringify({
                    "defaultcon":this.state.defaultcon,
                    "radius":this.state.radius,
                    "bgColor":this.state.bgColor+","+this.state.bgtmd,
                    "id":this.props.id,
                    "itemcolor":this.state.itemcolor,
                    "itembg":this.state.itembg+","+this.state.itembgtmd,
                    "concolor":this.state.concolor,
                    "selectbg":this.state.selectbg+","+this.state.selectTmd,
                    "searchH":this.state.searchheight
                })
            }).then(result => {
                if(result.api_status==true){
                    this.setState({visible:false});
                    message.success(getLabel(83551,"保存成功！"),2);
                    this.getDatas();
                }else {
                    message.error(getLabel(84544,"保存失败！"),2);
                }
            })

    }

    openDiag= () => {
        this.setState({visible:true});
    }

    onCancel= () => {
        this.getDatas();
        this.setState({visible:false});
    }

    getDatas = () => {

        WeaTools.callApi('/api/portal/quicksearch/getquick','GET',{
            "id":this.props.id,

        }).then((result) => {

            if(result.api_status==true&&result.isCz==true){
                WeaTools.callApi('/api/portal/quickSearch/getQuickSearchTypes?__random__='+new Date().getTime(),'GET',{}).then((data) => {
                    let bg = result.setting.bgColor.split(',');
                    let itembg = result.setting.itembgColor.split(',');
                    let selectBg = result.setting.selectbg.split(',');
                    let xzbg=this.colorToRGB(selectBg[0],parseInt(selectBg[1])/100);
                    jQuery(jQuery('head')[0]).append('<style type="text/css">.search-item:hover{background-color: '+xzbg+';} </style>');
                    this.setState({defaultcon:result.setting.defaultcon,radius:result.setting.radius,bgColor:bg[0],bgtmd:bg[1],isSys: result.isSys,
                        itemcolor:result.setting.itemcolor,itembg:itembg[0],itembgtmd:itembg[1],concolor:result.setting.concolor,searchheight:result.setting.searchheight,
                        selectbg:selectBg[0],selectTmd:selectBg[1],
                        searchTypes: data.data});
                    if(data.data.length > 0){
                        this.setState({
                            searchName:data.data[0].name,
                            searchUrl:data.data[0].url
                        })

                    }


                })
            }else if(result.api_status==true&&result.isCz==false){
                WeaTools.callApi('/api/portal/quickSearch/getQuickSearchTypes?__random__='+new Date().getTime(),'GET',{}).then((data) => {
                    this.setState({searchTypes: data.data});
                    if(data.data.length > 0){
                        this.setState({
                            searchName:data.data[0].name,
                            searchUrl:data.data[0].url
                        })

                    }
                })
            }
        })
    }


    componentDidMount(){
        this.getDatas();
    }

    changeHx = (cs) => {

        let tmd = parseInt(cs);
        if(tmd=='NaN'){
            tmd = 100;
        }
        const hxtmd = parseInt((tmd/100)*255);
        let temp = hxtmd.toString(16);
        if(hxtmd<10){
            temp ="0"+ temp;
        }
        return temp;

    }
    changeIcon = (type) => {
        if(type=="2"){
            return "/spa/portal/images/quicksearch/hrs_wev8.png"
        }else if(type=="9"){
            return "/spa/portal/images/quicksearch/search.png"
        }else if(type=="5"){
           return "/spa/portal/images/quicksearch/wls_wev8.png"
        }else if (type=="1"){
            return "/spa/portal/images/quicksearch/docs_wev8.png"
        }else if (type=="3"){
            return "/spa/portal/images/quicksearch/crm_wev8.png"
        }else if (type=="8"){
            return "/spa/portal/images/quicksearch/xz_wev8.png"
        }else if (type=="7"){
            return "/spa/portal/images/quicksearch/mail_wev8.png"
        }else if(type=="6"){
            return "/spa/portal/images/quicksearch/p_wev8.png"
        }else if (type=="4"){
            return "/spa/portal/images/quicksearch/zc_wev8.png"
        }
    }

    colorToRGB(color,tmd) {
        var color1, color2, color3;
        color = ""+color;
        if (typeof color !== "string") return;
        if (color.charAt(0) == "#") {
            color = color.substring(1);
        }
        var not16num = color.split("").filter(function (item, index) {
            return isNaN(parseInt(item, 16))
        });
        if(not16num.length) return;
        switch (color.length) {
            case 3:
                color1 = color.substr(0,1);
                color2 = color.substr(1,1);
                color3 = color.substr(2,1);
                color1 = color1 + color1;
                color2 = color2 + color2;
                color3 = color3 + color3;
                break;
            case 6:
                color1 = color.substr(0,2);
                color2 = color.substr(2,2);
                color3 = color.substr(4,2);
                break;
            default:
                return false;
        }
        color1 = parseInt(color1, 16);
        color2 = parseInt(color2, 16);
        color3 = parseInt(color3, 16);
        return "rgba("+color1+","+color2+","+color3+","+tmd+")";
    }

    render() {
        const { searchdiv,defaultcon,radius,visible,bgColor,searchTypes,itembg,bgtmd,itembgtmd,itemcolor,concolor} = this.state;
        const bj = this.colorToRGB(bgColor,parseInt(this.state.bgtmd)/100)
        const itembj = this.colorToRGB(itembg,parseInt(this.state.itembgtmd)/100)
        let display ="";
        if( this.props.isSetting==false){
            display="none";
        }


        return (
            <div className="portal-com-quick-search" style={{ "border-radius":radius ,"background-color":bj,"height":this.state.searchheight}}>
                <div className="quick-search">
                <div className="portal-com-quick-search-type" onClick={this.changeSearch}><span style={{"color":itemcolor}}>{this.state.searchName}</span></div>
                <div onClick={this.changeSearch}>
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@u0pqn5`} style={{"cursor": "pointer"}} className="portal-com-quick-search-down" type={this.state.IconType}  />
                </div>
                <div className="searchContent" >
                    <input id="searchContent" name="searchContent"  style={{color:concolor}} className="portal-com-quick-search-input" type="text" placeholder={defaultcon}
                           onChange={(event) => {this.setState({searchContent:event.target.value}); }}/>
                </div>
                <div  style={{"font-size":16,"cursor": "pointer"}} >
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@de8vab`} onClick={this.searchS} className="portal-com-quick-search-search" type="search"/>
                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@h00jyu`} className="portal-com-quick-search-setting"   style={{display:display,"color":"#000"}}  onClick={this.openDiag} type="setting"/>
                </div>
                </div>

                <div className="search_div" style={{"visibility": searchdiv,"background-color":itembj}}>
                    {searchTypes.length>0 ? ( searchTypes.map((item) => {
                        const {type, name, icon} = item;

                        let iconComp = null;
                        if (icon) {
                            if (type == 10) {
                                iconComp = <img  style={{width:"14px",height:"14px"}} src={icon} alt=""/>;
                            } else {
                                iconComp = <i className={icon} style={{fontSize: '14px', marginLeft: '1px', marginTop: '-8px',"color":itemcolor}}/>;
                            }
                        } else {
                            iconComp = <i className={`wevicon-quick-search-${type}`}  style={{"color":itemcolor,fontSize:'14px'}}/>;
                        }
                        return (
                            <div className="search-item "  onClick={() =>{this.changeSearchName(item)}}>
                                {iconComp}
                                <span title={item.name} className="search-name" style={{"color":itemcolor}}>{item.name}</span>
                            </div>
                        );
                    })):""}
                </div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@32l3gv`} visible={visible} onCancel={this.onCancel}   resize={true}  hasScroll={true}  style={{width: 560}} title={getLabel(30747,"设置")} >
                        <Setting_Tab ecId={`${this && this.props && this.props.ecId || ''}_Setting_Tab@ntyph3`} changeDefaultCon={this.changeDefaultCon}
                                     settingInfo={this.state}
                                 radiusChange={this.radiusChange}
                                 changebgColor={this.changebgColor}
                                 changebgTMD={this.changebgTMD}
                                 changeItemColor={this.changeItemColor}
                                 changeItembg={this.changeItembg}
                                 changeConColor={this.changeConColor}
                                 changeselectedBg={this.changeselectedBg}
                                     changeitembgTMD={this.changeitembgTMD}
                                 changeSearchHeight={this.changeSearchHeight}
                                     changeXzTmd={this.changeXzTmd}
                        />
                    <div style={{position:"relative",bottom:6,"margin-left": "67%","margin-top": 12}}>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oblc72`} onClick={this.saveSetting} type="primary">{getLabel(33703,"确认")}</Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c6aiq5`} onClick={this.onCancel} style={{"margin-left":10}}>{getLabel(31129,"取消")}</Button>
                    </div>
                </WeaDialog>
            </div>
        );
    }
}

export default QuickSearch;